<template>
  <div class="MyRegister page" ref="webview">
    <van-nav-bar title="注册新会员" class="bg_white" left-arrow @click-left="$router.go(-1)" />
    <div class="content">
      <van-field v-model="form.memberNo" label="会员编号" input-align="right" clearable placeholder="请输入会员编号" />
      <van-field v-model="form.nickname" label="昵称" input-align="right" clearable placeholder="输入昵称" />
      <van-field v-model="form.password" label="密码" type="password" input-align="right" clearable placeholder="请输入密码" />
      <van-field v-model="form.recNo" clearable label="推荐人" input-align="right" placeholder="请输入推荐人" />
      <van-field v-model="form.parentNo" clearable label="接点人" input-align="right" placeholder="请输入接点人" />
      <van-field v-model="form.serviceNo" clearable label="报单中心" input-align="right" placeholder="请输入报单中心编码" />
      <div class="bk active van-hairline--bottom" @click="isAction=true">
        <span class="label">级别</span>
        <div class="name" :class="{active: levelValue}">{{levelValue || '请选择级别'}}</div>
      </div>
      <div class="bk active van-hairline--bottom">
        <span class="label">级别</span>
        <div class="sname">
          <van-radio-group v-model="form.theArea">
            <van-radio name="1">左区</van-radio>
            <van-radio name="2">右区</van-radio>
          </van-radio-group>
        </div>
      </div>
      <div class="bk van-hairline--bottom">
        <span class="label">注册积分余额</span>
        <div class="sname">{{userInfo.regScore}}</div>
      </div>
      <div class="agreement">
        <van-checkbox v-model="IsAgreement" shape="square">我已阅读并同意遵守</van-checkbox>
        <span class="agreement-text" @click="isPopup=true;">《服务协议和合作协议》</span>
      </div>
    </div>
    <div class="addCard">
      <van-button class="btn" round :loading="isLoading" @click.native="submitData">添加</van-button>
    </div>
    <van-popup :duration="0.2" v-model="isPopup" position="bottom" style="height:100%">
      <div class="agreement-details">
        <div class="nav-bar">
          <van-nav-bar title="服务协议" class="bg_white" @click-right="isPopup=false">
            <span class="van-icon van-icon-cross" slot="right" />
          </van-nav-bar>
        </div>
        <div class="content" v-html="agreement.content">
        </div>
      </div>
    </van-popup>
    <van-action-sheet v-model="isAction" :round="false " @select="selectAction" cancel-text="取消" :actions="levelList" description="级别 " />
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  name: 'MyRegister',
  data () {
    return {
      duration: 0.2,
      isPopup: false,
      radio: '1',
      isAction: false,
      IsAgreement: true,
      disabled: false,
      isLoading: false,
      defaultIndex: 0,
      selectActionItem: {},
      levelValue: '',
      agreement: '',
      form: {
        memberNo: '',
        nickname: '',
        password: '',
        recNo: '',
        parentNo: '',
        serviceNo: '',
        levelValue: 1,
        theArea: '1'
      },
      list: []
    };
  },
  computed: {
    ...mapGetters(['userInfo', 'level']),
    levelList () {
      return this.level.map(item => {
        // item.disabled = this.userInfo.level_value === item.value;
        return item;
      });
    }
  },
  created () {
    this.getAgreement();
  },
  methods: {
    selectAction (data) {
      this.isAction = false;
      this.levelValue = data.name;
      this.selectActionItem = data;
    },
    getAgreement () {
      this.$toast.loading();
      var options = {
        code: 'reg'
      };
      this.$API.global.getCnt(options).then(res => {
        if (res.data) {
          this.agreement = res.data;
        }
        this.$toast.clear();
      });
    },
    submitData () {
      if (this.form.memberNo === '') {
        this.$toast('请输入会员编号');
        return;
      }
      if (this.form.nickname === '') {
        this.$toast('请输入昵称');
        return;
      }
      if (this.form.password === '') {
        this.$toast('请输入密码');
        return;
      }
      if (this.form.recNo === '') {
        this.$toast('请输入推荐人');
        return;
      }
      if (this.form.parentNo === '') {
        this.$toast('请输入接点人');
        return;
      }
      if (this.form.serviceNo === '') {
        this.$toast('请输入报单中心编码');
        return;
      }
      if (!this.IsAgreement) {
        this.$toast('请阅读服务协议!');
        return;
      }
      this.form.levelValue = this.selectActionItem.value;
      this.isLoading = true;
      this.$API.user.reg(this.form).then(res => {
        if (!res.code) {
          this.$toast('注册成功');
          setTimeout(() => {
            this.$router.go(-1);
          }, 800);
        } else {
          this.$toast(res.message);
        }
        this.isLoading = false;
      });
    }
  }
};
</script>
<style lang="less" scoped>
.MyRegister {
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
  }
  .agreement {
    padding: 30px 40px;
    font-size: 28px;
    display: flex;
    justify-content: flex-start;
    .agreement-text {
      color: #125dff;
    }
    .van-icon {
      border-radius: 4px;
    }
  }
  .textName {
    background-color: #f1f3f7;
    line-height: 76px;
    padding: 0 40px;
    color: #252525;
  }
  .code {
    background: #917eff;
    border-radius: 50px;
    font-size: 24px;
    padding: 5px 20px;
    display: inline-block;
    color: #fff;
  }
  .agreement-details {
    background-color: #fff;
    height: 100%;
    .van-icon-cross {
      font-size: 40px;
      padding-right: 10px;
    }
    .content {
      padding: 34px;
      font-size: 28px;
      color: #171717;
      line-height: 60px;
    }
  }
  .code.disable {
    background-color: #dbdee6;
  }
  .addCard {
    color: #fff;
    font-size: 32px;
    text-align: center;
    position: fixed;
    bottom: calc(30px + env(safe-area-inset-bottom));
    left: 40px;
    right: 40px;
    .btn {
      width: 100%;
      background-color: #fff;
      color: #111;
      &:active::before {
        display: none;
      }
    }
    .van-button__text {
      color: #125dff;
      font-size: 32px;
      &::before {
        display: inline-block;
        font-size: 40px;
        margin-right: 10px;
      }
    }
  }
}
</style>
